.radio {
  @apply relative shrink-0 cursor-pointer appearance-none rounded-full p-1 align-middle;
  border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000);
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: var(--size);
  height: var(--size);
  color: var(--input-color, var(--color-neutral));
  &:before {
    @apply block size-full rounded-full;
    --tw-content: "";
    content: var(--tw-content);
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
  }

  &:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000);
    outline-offset: 0px;
  }

  &:checked,
  &[aria-checked="true"] {
    animation: radio 0.2s ease-out;
    @apply bg-base-100 border-current;
    box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 30%, #0000);

    &:before {
      @apply bg-current;
      box-shadow:
        0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
        0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
        0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
    }
    @media (forced-colors: active) {
      &:before {
        @apply outline -outline-offset-1;
      }
    }
    @media print {
      &:before {
        outline: 0.25rem solid;
        outline-offset: -1rem;
      }
    }
  }
}

/* Variant */

.radio-inset {
  &:checked,
  &[aria-checked="true"] {
    animation: radio-inset 0.2s ease-out;
    @apply bg-current;
    box-shadow:
      0 6px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
      0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)),
      0 1px 2px 0 color-mix(in oklab, var(--color-base-content) 30%, #0000);

    &:before {
      @apply bg-base-100;
      box-shadow: none;
    }
  }
}

/* Size */

.radio-primary {
  --input-color: var(--color-primary);
}

.radio-secondary {
  --input-color: var(--color-secondary);
}

.radio-accent {
  --input-color: var(--color-accent);
}

.radio-info {
  --input-color: var(--color-info);
}

.radio-success {
  --input-color: var(--color-success);
}

.radio-warning {
  --input-color: var(--color-warning);
}

.radio-error {
  --input-color: var(--color-error);
}

.radio:disabled {
  @apply cursor-not-allowed opacity-50;
}

.radio-xs {
  padding: 0.1875rem;
  &:is([type="radio"]) {
    --size: calc(var(--size-selector, 0.25rem) * 4);
  }
}

.radio-sm {
  padding: 0.1875rem;
  &:is([type="radio"]) {
    --size: calc(var(--size-selector, 0.25rem) * 5);
  }
}

.radio-md {
  padding: 0.25rem;
  &:is([type="radio"]) {
    --size: calc(var(--size-selector, 0.25rem) * 6);
  }
}

.radio-lg {
  padding: 0.3125rem;
  &:is([type="radio"]) {
    --size: calc(var(--size-selector, 0.25rem) * 7);
  }
}

.radio-xl {
  padding: 0.375rem;
  &:is([type="radio"]) {
    --size: calc(var(--size-selector, 0.25rem) * 8);
  }
}
@keyframes radio {
  0% {
    padding: 5px;
  }

  50% {
    padding: 3px;
  }
}

@keyframes radio-inset {
  0% {
    padding: 1px;
  }

  50% {
    padding: 4px;
  }
}
